<template>
  <div>
    <el-radio-group v-model="isCollapse">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu class="el-menu-vertical-demo" :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </template>
        <el-submenu index="1-1">
          <i slot="title" class="el-icon-s-shop"></i>
          <span slot="title">商品管理</span>
          <el-menu-item index="1-1-1" @click="addGoods">商品添加</el-menu-item>
          <el-menu-item index="1-1-2" @click="$router.push('/bkhome/editgoods')">商品编辑</el-menu-item>
        </el-submenu>
        <el-submenu index="1-3">
          <i slot="title" class="el-icon-bicycle"></i>
          <span slot="title">客户管理</span>
          <el-menu-item index="1-3-1" @click="custommanage">客户统计</el-menu-item>
        </el-submenu>
        <el-submenu index="1-4">
          <i slot="title" class="el-icon-document"></i>
          <span slot="title">订单管理</span>
          <el-menu-item index="1-4-1" @click="finishorder">已完成订单</el-menu-item>
          <el-menu-item index="1-4-2" @click="orderdelivered">待配送订单</el-menu-item>
        </el-submenu>
        <el-submenu index="1-5">
          <i slot="title" class="el-icon-s-custom"></i>
          <span slot="title">速递员管理</span>
          <el-menu-item index="1-5-1" @click="expressmanage">速递员统计</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-alarm-clock"></i>
        <span slot="title">速递员申请</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import bus from '@/eventBus.js'
export default {
  data() {
    return {
      isCollapse: true
    }
  },
  methods: {
    addGoods() {
      this.$router.push('/bkhome/addgoods')
    },
    custommanage() {
      // 客户管理界面
      this.$router.push('/bkhome/custom')
      this.$nextTick(() => {
        bus.$emit('userinterface')
      })
    },
    expressmanage() {
      // 速递员管理界面
      this.$router.push('/bkhome/express')
      this.$nextTick(() => {
        bus.$emit('expressinterface')
      })
    },
    finishorder() {
      this.$router.push('/bkhome/finishorder')
    },
    orderdelivered() {
      this.$router.push('/bkhome/delivered')
    }
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
